<template>
  <div class="demo-container">
    <h2>大数据量虚拟滚动功能</h2>
    <p>展示表格处理大数据量的能力，避免一次性渲染所有数据</p>

    <div class="controls">
      <el-button type="primary" @click="generateData"
        >生成{{ dataCount }}条测试数据</el-button
      >
      <el-button type="danger" @click="clearData">清空数据</el-button>
    </div>

    <div v-if="loading" class="loading-info">生成数据中，请稍候...</div>

    <div v-if="!loading && tableData.length > 0" class="table-info">
      <p>
        总数据条数: <strong>{{ tableData.length }}</strong>
        <span class="tips">(滚动加载，每页显示{{ pageSize }}条数据)</span>
      </p>

      <AdvancedTable
        ref="tableRef"
        :data="tableData"
        :columns="columns"
        :selection="false"
        :show-index="true"
        :page-limit="pageLimit"
        :page-size="pageSize"
        :current-page="currentPage"
        :span-method="mergeRows ? spanMethod : undefined"
        height="500px"
        @page-change="handlePageChange"
      >
        <!-- 自定义工具栏 -->
        <template #toolbar>
          <div class="table-controls">
            <el-switch
              v-model="mergeRows"
              active-text="启用行合并"
              inactive-text="禁用行合并"
            />
          </div>
        </template>
      </AdvancedTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { AdvancedTable } from '../components/Table'
import { generateMockData, finalRowMerge } from '../components/Table/utils'

// 表格引用
const tableRef = ref()

// 数据量
const dataCount = 10000

// 表格配置
const pageSize = 100
const pageLimit = 1000
const currentPage = ref(1)
const mergeRows = ref(false)
const loading = ref(false)

// 表格数据
const tableData = ref<any[]>([])

// 表格列定义
const columns = [
  {
    prop: 'department',
    label: '部门',
    width: 120,
  },
  {
    prop: 'name',
    label: '姓名',
    width: 120,
  },
  {
    prop: 'age',
    label: '年龄',
    width: 80,
  },
  {
    prop: 'position',
    label: '职位',
    width: 120,
  },
  {
    prop: 'address',
    label: '地址',
    minWidth: 180,
  },
  {
    prop: 'email',
    label: '邮箱',
    width: 180,
  },
  {
    prop: 'phone',
    label: '电话',
    width: 120,
  },
  {
    prop: 'date',
    label: '入职日期',
    width: 120,
  },
]

// 生成测试数据
const generateData = async () => {
  loading.value = true

  try {
    // 使用setTimeout模拟异步生成大量数据，避免阻塞UI
    await new Promise<void>((resolve) => {
      setTimeout(() => {
        tableData.value = generateMockData(dataCount)
        resolve()
      }, 200)
    })

    currentPage.value = 1
    ElMessage.success(`成功生成 ${dataCount} 条测试数据`)
  } catch (error) {
    ElMessage.error('生成数据失败')
  } finally {
    loading.value = false
  }
}

// 清空数据
const clearData = () => {
  tableData.value = []
  currentPage.value = 1
}

// 页码改变
const handlePageChange = (page: number) => {
  currentPage.value = page
}

// 行合并方法
const spanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  return finalRowMerge('department')({
    data: tableData.value,
    row,
    rowIndex,
    columnIndex,
  })
}
</script>

<style scoped>
.demo-container {
  padding: 20px;
}

h2 {
  margin-top: 0;
}

.controls {
  margin: 15px 0;
  display: flex;
  gap: 10px;
}

.loading-info {
  margin: 20px 0;
  color: #409eff;
  font-weight: bold;
}

.table-info {
  margin-top: 15px;
}

.table-controls {
  margin-bottom: 15px;
}

.tips {
  color: #909399;
  margin-left: 10px;
  font-size: 12px;
}
</style>
